<template>
	<view>
		<view class="title-box">
			<uni-title  title1="注册" title2="朝夕" text1="VIP学员可获取对应课程的视频源码"></uni-title>
		</view>
		
		<form>
			<view class="item">
				<view class="label">昵称</view>
				<input v-model="loginData.username" type="text" placeholder="请输入昵称" />
			</view>
			<view class="item">
				<view class="label">qq</view>
				<input v-model="loginData.name" type="text" placeholder="请输入QQ" />
			</view>
			<view class="item">
				<view class="label">手机号</view>
				<input v-model="loginData.phone" type="text" placeholder="请输入手机号" />
			</view>
			<view class="item">
				<view class="label">性别</view>
				 <picker @change="getSex" :value="sex" :range="array">
				     <view class="uni-input">{{array[sex]}}</view>
				</picker>
				<!-- <input v-model="loginData.sex" type="text" placeholder="请选择性别" /> -->
			</view>
			<view class="item">
				<view class="label">密码</view>
				<input v-model="loginData.password" password="true" type="text" placeholder="请输入密码" />
			</view>
			<view class="item">
				<view class="label">验证码</view>
				<input v-model="loginData.imgCode" type="text" placeholder="请输入验证码" />
				<image @click="getImgCode" :src="'https://test.zhaoxiedu.net/api/login/CreateValidateCode/?t='+imgCode" mode=""></image>
			</view>
			<view class="item">
				 <button @click="subFun" type="primary">注册</button>
			</view>
			
			<view class="item">
				 <view class="tip-text">
				 	<text @click="goLogin">已有账号，我要登录</text>
				 </view>
			</view>
		</form>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgCode: +new Date(),
				loginData:{
					name:'',
					password:'',
					imgCode:'',
					phone:'',
					username:'',
					sex:''
				},
				array:['男','女'],
				sex:0
			}
		},
		methods: {
			getImgCode(){
				this.imgCode = +new Date()
			},
			subFun(){
				let msg='';
				
				this.loginData.sex = this.array[this.sex]
				for (let s in this.loginData) {
					if(!this.loginData[s]){
						msg = '信息不完整';
					}
				}
				 
				if(!msg){
					uni.request({
					    url: 'https://www.fastmock.site/mock/b5b84dc2a6df42eb062ed5ee7bd72b4a/uni/login', 
					    data:this.loginData,
						method:"POST",
						success: (res) => {
							uni.showToast({
							    title: "注册成功",
							    duration: 2000,
								icon:"none"
							});
							
							        uni.switchTab({
							            url: '/pages/home/home'
							        });
							//     }
							// });
					    }
					});
				}else{
					uni.showToast({
					    title: msg,
					    duration: 2000,
						icon:"none"
					});
				}
			},
			goLogin(){
				uni.navigateTo({
				    url: `/pages/login/login`
				});
			},
			getSex(index){
				this.loginData.sex = index.detail.value
			}
		}
	}
</script>


<style scoped>
	/* #ifdef APP-PLUS */
		.title-box{
			padding: 30px 0;
		}
	/* #endif */
	
	.item{
		height:50px;
		display: flex;
		align-items: center;
		flex-direction: row;
		padding:0 10px;
		border-top: 2px solid #efefef;
	}
	.item .label{
		width: 100px;
	}
	.item image{
		width: 150px;
		height: 40px;
	}
	.item input{
		flex:1
	}
	.item button{
		width: 100%;
		margin-top: 20px;
	}
	.tip-text{
		width: 100%;
		text-align: right;
		color: #333;
	}
	.tip-text text{
		text-decoration:underline;
	}
</style>

